import React, { FC, useState } from 'react';
import { Select, Button, Card, Table, Modal, Input } from 'antd';
import './class.css';

const { Option } = Select;

const SchoolInfoAudit: FC = () => {
  // 表格数据
  const [dataSource, setDataSource] = useState([
    {
      key: '1',
      category: '农林类',
      majorClass: '农业类',
      major: '农业',
      grade: '一年级',
      alias: '一',
      code: '10101', // 添加专业码
      expanded: false,
    },
    {
      key: '2',
      category: '兽医类',
      majorClass: '兽医类',
      major: '兽医',
      grade: '二年级',
      alias: '二',
      code: '20201', // 添加专业码
      expanded: false,
    },
    {
      key: '3',
      category: '渔业类',
      majorClass: '渔业类',
      major: '渔业',
      grade: '三年级',
      alias: '三',
      code: '30301', // 添加专业码
      expanded: false,
    },
    {
      key: '4',
      category: '农林类',
      majorClass: '林业类',
      major: '林业',
      grade: '四年级',
      alias: '四',
      code: '40401', // 添加专业码
      expanded: false,
    },
  ]);

  // 表格列定义
  const columns = [
    { title: '专业名称(学科门类)', dataIndex: 'category', key: 'category' },
    { title: '专业名称(专业类)', dataIndex: 'majorClass', key: 'majorClass' },
    { title: '专业名称(专业)', dataIndex: 'major', key: 'major' },
    { title: '年级', dataIndex: 'grade', key: 'grade' },
    { title: '年级别名', dataIndex: 'alias', key: 'alias' },
    { title: '专业码', dataIndex: 'code', key: 'code' }, // 添加专业码列
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (text, record) => (
        <div>
          <Button type="link" onClick={() => handleViewDetails(record)}>
            查看详情
          </Button>
          <Button type="link" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button type="link" onClick={() => handleDelete(record)}>
            删除
          </Button>
        </div>
      ),
    },
  ];

  const handleViewDetails = record => {
    console.log('查看详情:', record);
  };

  const handleEdit = record => {
    console.log('编辑:', record);
    Modal.confirm({
      title: '编辑',
      content: (
        <div>
          <p>
            专业名称(学科门类): <Input value={record.category} />
          </p>
          <p>
            专业名称(专业类): <Input value={record.majorClass} />
          </p>
          <p>
            专业名称(专业): <Input value={record.major} />
          </p>
          <p>
            年级: <Input value={record.grade} />
          </p>
          <p>
            年级别名: <Input value={record.alias} />
          </p>
        </div>
      ),
      onOk() {
        console.log('保存编辑');
      },
    });
  };

  const handleDelete = record => {
    console.log('删除:', record);
    Modal.confirm({
      title: '确认删除',
      content: `您确定要删除 ${record.major} ${record.grade} 吗？`,
      onOk() {
        setDataSource(dataSource.filter(item => item.key !== record.key));
        console.log('删除成功');
      },
    });
  };

  const toggleExpand = key => {
    setDataSource(dataSource.map(item => (item.key === key ? { ...item, expanded: !item.expanded } : item)));
  };

  return (
    <div>
      <div
        style={{
          backgroundColor: 'white',
          padding: '10px 20px',
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <span>年级管理(校)</span>
        <Button type="primary">编辑模式</Button>
      </div>
      <Card
        style={{
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
        }}
      >
        <div className="menu" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Button type="link" style={{ padding: 0 }}>
            历史记录
          </Button>
        </div>
        <hr style={{ margin: '10px 0', border: '1px solid #e8e8e8' }} />
        <div className="con">
          <div className="left">
            <div className="professioname">
              <span>专业名称</span>
              <span>专业码</span>
            </div>
            <div className="professcon">
              {dataSource.map(item => (
                <div key={item.key} style={{ marginBottom: '10px' }}>
                  <button
                    onClick={() => toggleExpand(item.key)}
                    style={{ border: 'none', background: 'none', cursor: 'pointer' }}
                  >
                    {item.expanded ? '-' : '+'} {item.majorClass}
                  </button>
                  {item.expanded && (
                    <div style={{ paddingLeft: '20px' }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <p>专业名称: {item.major}</p>
                        <p>专业码: {item.code}</p> {/* 显示专业码 */}
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
          <div className="right">
            <div className="right">
              <div className="selectr" style={{ display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', marginBottom: '10px' }}>
                  <div style={{ marginRight: '10px' }}>
                    <span>年级别名：</span>
                    <Input placeholder="请输入年级别名" style={{ width: '150px' }} />
                  </div>
                  <div style={{ marginRight: '10px' }}>
                    <span>年级：</span>
                    <Select defaultValue="选择年级" style={{ width: 120 }}>
                      <Option value="grade1">一年级</Option>
                      <Option value="grade2">二年级</Option>
                      <Option value="grade3">三年级</Option>
                    </Select>
                  </div>
                  <div style={{ marginRight: '10px' }}>
                    <span>专业名称：</span>
                    <Input placeholder="请输入专业名称" style={{ width: '150px' }} />
                  </div>
                </div>

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Button type="primary">创建班级</Button>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Button type="primary" style={{ marginRight: '10px' }}>
                      查询
                    </Button>
                    <Button>重置</Button>
                  </div>
                </div>

                <Table dataSource={dataSource} columns={columns} pagination={false} />
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
};

export default SchoolInfoAudit;
